<template>
    <el-card shadow="always">
        <div style="padding-left:20px; padding:30px">
            浏览记录
        </div>
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top:10px">
        <!-- <div class="searchContainer">
            <div class="searchInput">
                <input type="text" />
                <i></i>
                <button>搜索</button>
            </div>
        </div> -->
        <div class="">
            <div class="">
                <div style="width: 270px;height:40px;background:#F5F7F9;float:left;border:1px solid #ccc;">
                    <svg style="margin:10px 5px 0 10px;" t="1666106292294" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2550" width="14" height="14">
                        <path
                            d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z"
                            fill="#3D3D3D" p-id="2551"></path>
                    </svg>
                    <input type="text" style="border: none;outline: none;background:#F5F7F9;height:90%;" v-model="val"
                        @blur="inpval" />
                </div>
                <button
                    style="float:left;height:40px;width:60px;margin-left:10px;background:#F5F7F9;color:#7d8090;border:none;"
                    @click="searchS">搜索</button>

                <div style="float:right; margin-right:30px; line-height:30px" v-if="delflag" @click="btnHandle">批量删除
                </div>
                <div style="float:right; margin-right:30px; line-height:30px" v-else>
                    <button class="bb" @click="delflag = true">取消</button> &nbsp;
                    <button class="bb" @click="yes">确定</button> &nbsp;
                    <button class="bb" v-if='bbflag' @click="quanxuan">全选</button>
                    <button class="bb" v-else @click="quanbuxuan">全不选</button>
                </div>
            </div>
        </div>

        <div class="videoList">
            <!-- 一个视频组件 -->
            <div class="videoItem" v-for="(HistoryItem,index) in HistoryList" :key="HistoryItem.id">
                <div class="left">
                    <img :src="HistoryItem.momentBackup.cover[0]" alt="">
                </div>
                <div class="center">
                    <div class="title">{{HistoryItem.momentTitle}}</div>
                    <span>视频课</span>
                    <div class="mind">
                        <img :src="HistoryItem.momentBackup.creatorBackup.avatar" alt="">
                        <span>{{HistoryItem.momentBackup.creatorBackup.name}}</span>
                    </div>
                </div>

                <div class="right">

                    <span>{{isToday(HistoryItem.updateTime) == '昨天之前'?'': isToday(HistoryItem.updateTime) }}
                        {{dayjs(HistoryItem.updateTime).format(' HH:ss')}}</span>
                    <div>
                        <el-button text @click="open(HistoryItem.momentId,HistoryItem.id)" v-if="delflag">删除
                        </el-button>
                        <el-button  :type="HistoryItem.ff ? 'danger':'info'" :icon="Check" circle  style="width:10px;height:10px" @click="fanxuan(HistoryItem)" v-else />
                    </div>


                </div>
            </div>
        </div>

    </el-card>


</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'

import { getHistory } from '../../../api/room/history/index'
import dayjs from 'dayjs'
import request from '../../../utils/request'
let val = ref('')
let delflag = ref(true)
let bbflag = ref(true)
let HistoryList = ref([])
let idArr = ref([])

const btnHandle = () => {
    delflag.value = false



}

const quanxuan = ()=>{
    bbflag.value = false
    HistoryList.value.forEach(item => {
        item.ff = true
    })
}

const quanbuxuan = ()=>{
    bbflag.value = true
    HistoryList.value.forEach(item => {
        item.ff = false
    })
}

const fanxuan = (item)=>{
    item.ff = !item.ff
}

const yes = async()=>{
    let valArr = HistoryList.value.filter(item=>{
        return item.ff == true
    })

    valArr.forEach(item=>{
        idArr.value.push(item.id)
    })

    

    await request.post('task/tasks?access_token=391fefd2-61e7-464f-a298-752809236444',{
        name: 'batchDeleteSomeViewRecords',
        params: { ids: idArr.value }
    })
    getHistoryList()


}

const searchS = async () => {

    let rs = await request(`https://www.dance365.com/apis/moment/viewRecords?access_token=391fefd2-61e7-464f-a298-752809236444&pageSize=10&pageNum=0&keyword=${val.value}`)

    HistoryList.value = rs.content
}

const inpval = () => {
    if (val.value == '') {
        getHistoryList()
    }
}


onMounted(() => {
    getHistoryList()
})
const getHistoryList = async () => {
    let rs = await getHistory()
    rs.content.forEach(item => {
        item.ff = false
    })
    HistoryList.value = rs.content

}

const isToday = (str) => {
    let d = new Date(str).setHours(0, 0, 0, 0);
    let today = new Date().setHours(0, 0, 0, 0);


    let obj = {
        "-172800000": '前天',
        '-86400000': '昨天',
        0: '今天',
        86400000: '明天',
    };

    return obj[d - today] || '昨天之前';
};

const open = (name, ids) => {
    ElMessageBox.confirm(
        '确定要删除吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })

            await request.post("task/tasks?access_token=391fefd2-61e7-464f-a298-752809236444", {
                name: 'batchDeleteSomeViewRecords',
                params: { ids: [ids] }
            })
            getHistoryList()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}

</script>

<style scoped>
.bb {
    border: none;
    background: #fff;
    color: hotpink;
}

.searchContainer .searchInput {
    width: 100%;
}

.searchContainer .searchInput input {
    width: 270px;
    height: 35px;
    outline: none;
    border: 1px solid #EAECF0;
    border-radius: 4px;
    background: #f5f7f9;
}

.searchContainer .searchInput button {
    background: #f5f7f9;
    border-radius: 4px;
    color: #7d8090;
    font-size: 14px;
    display: inline-block;
    padding: 10px 17px;
    margin-left: 10px;
    cursor: pointer;
    border: none;
}

.videoList {
    margin-top: 60px;

}


.videoList .videoItem {
    display: flex;
    padding: 20px 0;
    border-bottom: .5px solid #a8a9b1;
}

.videoList .videoItem:hover {
    background-color: #e9eaf0;
}

.videoList .videoItem .left {
    width: 169px;
    height: 100px;
}

.videoList .videoItem .left img {
    width: 100%;
    height: 100%;
}

.videoList .videoItem .center {
    width: 293px;
    height: 100px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}

.videoList .videoItem .center .title {
    width: 276px;
    height: 23px;
    display: block;
    white-space: nowrap;
    /*规定文本不换行**/
    overflow: hidden;
    text-overflow: ellipsis;

}

.videoList .videoItem .center span {
    font-size: 12px;
    color: #7d8090;
    width: 30px;
    line-height: 50px;
    width: 100px;
}

.videoList .videoItem .center .mind {
    width: 276px;
    height: 30px;
    display: flex;

}

.videoList .videoItem .center .mind img {
    width: 30px;
    height: 30px;
    margin-right: 11px;
    border-radius: 50%;
}

.videoList .videoItem .center .mind span {
    line-height: 30px;
    color: black;
    font-size: 14px;
}

.videoList .videoItem .right {
    margin-left: 200px;
    display: flex;
    width: 200px;
    height: 100px;

}

.videoList .videoItem .right span {
    width: 100px;
    text-align: center;
    line-height: 100px;
}

.videoList .videoItem .right div {
    margin-left: 50px;
    width: 100;
    text-align: center;
    line-height: 100px;
    color: #7d8090;
}
</style>